<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    @close="withdrawShow"
    width="26%"
    :showDialog="showDialog"
    :destroy-on-close="true"
  >
    <el-form
      :model="withdrawRuleForm"
      :rules="withdrawRules"
      ref="withdrawRuleForm"
      inline
      class="widen"
    >
      <el-form-item id="withdrawAllMoney" label="提现金额：" fixed="right">
        <div class="breadth">{{ withdrawAllMoney }}元</div>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in withdrawRuleForm.domains"
        :key="domain.key"
      >
        <div class="styleBtn">
          <div class="leftBtn">
            <div class="leftGroup">
              <el-form-item
                label="京东卡号："
                :prop="'domains[' + index + '].cardAccount'"
              >
                <el-input
                  placeholder="请输入卡号"
                  size="mini"
                  :change="check_num(index)"
                  v-model.trim="domain.cardAccount"
                  maxlength="20"
                ></el-input>
              </el-form-item>
            </div>

            <el-form-item
              label="京东卡钥："
              :prop="'domains[' + index + '].cardPassword'"
            >
              <el-input
                :change="check_num(index)"
                placeholder="请输入卡钥"
                size="mini"
                v-model.trim="domain.cardPassword"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </div>
          <!-- styleBtn -->
          <div class="rightBtn">
            <el-button
              @click="addBtn"
              class="styleBtn_item"
              icon="el-icon-circle-plus-outline"
              circle
            ></el-button>
            <el-button
              @click.prevent="clsBtn(domain)"
              class="styleBtn_item"
              icon="el-icon-remove-outline"
              circle
            ></el-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="withdrawShow">取 消</el-button>
      <el-button type="success" @click="withdraw">提 现</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setWithdraw } from '@/api/withdrawList/index'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    withdrawAllMoney: {
      type: Number,
      default: 0
    },
    activityAll: {
      type: Array,
      required: true
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    // 卡密校验
    const cardPassword = (rule, value, callback) => {
      let reg = /^([\da-z-]){10,20}$/i
      if (value === '' || value === undefined || value == null) {
        callback()
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的卡密,长度在10-20之间'))
        } else {
          callback()
        }
      }
    }
    // 卡号校验
    const cardAccount = (rule, value, callback) => {
      let reg = /^([\da-z]){10,20}$/i
      if (value === '' || value === undefined || value == null) {
        callback()
      } else {
        if (!reg.test(value)) {
          callback(new Error('卡号格式不正确,长度在10-20之间'))
        } else {
          callback()
        }
      }
    }
    return {
      dialogFormVisible: this.showDialog,
      // 提现校验
      withdrawRuleForm: {
        domains: [
          {
            cardAccount: '',
            cardPassword: ''
          }
        ]
      },
      // 提现校验规则
      withdrawRules: {
        domains: [
          {
            cardAccount: [
              { required: true, message: '请输入卡号', trigger: 'blur' },
              { validator: cardAccount, trigger: 'blur' }
            ],
            cardPassword: [
              { required: true, message: '请输入卡钥', trigger: 'blur' },
              { validator: cardPassword, trigger: 'blur' }
            ]
          }
        ]
      },
      // // 提现传的参数
      withdrawParams: {
        cardAccount: '',
        cardPassword: ''
      }
    }
  },
  methods: {
    // 点击 提现
    withdraw() {
      this.$refs.withdrawRuleForm.validate((valid) => {
        const arr = []
        this.withdrawRuleForm.domains.forEach((item) => {
          arr.push({
            cardAccount: item ? item.cardAccount : String(item.cardAccount),
            cardPassword: item
              ? item.cardPassword
              : String(item.cardPassword)
          })
        })
        if (valid) {
          let id = this.id
          setWithdraw(
            id,
            arr,
            (res) => {
              this.$message({
                message: `您有 ${this.withdrawAllMoney} 元奖励金已到账，请查收！`,
                type: 'success'
              })
              this.$refs.withdrawRuleForm.resetFields()
              
              this.$parent.searchList()
            },
            (err) => {
              if (err.code == '409') {
                this.$message({
                  message: err.message,
                  type: 'error'
                })
                console.log(err)
              }
            }
          )
        } else {
          return false
        }
        this.$emit('update:showDialog', false)
      })
    },
    // 关闭的时候
    withdrawShow() {
      if (this.withdrawRules.domains.length > 1) {
        console.log(this.withdrawRules.domains.length);
        this.withdrawRuleForm.domains.splice(1)
        this.withdrawRules.domains.shift(this.withdrawRules.domains[0])
      }
      this.withdrawRuleForm.domains = [ 
        {    cardAccount: '',
          cardPassword: ''
        }
        ]
      // this.$refs.withdrawRuleForm.resetFields()
      this.$emit('update:showDialog', false)
    },
    addBtn() {
      if (this.withdrawRules.domains.length < 10) {
        this.withdrawRuleForm.domains.push({
          cardAccount: '',
          cardPassword: ''
        })
        this.withdrawRules.domains.push(this.withdrawRules.domains[0])
      } else {
        this.$message.warning('最大10个')
      }
    },
    clsBtn(item) {
      if (this.withdrawRules.domains.length > 1) {
        var index = this.withdrawRuleForm.domains.indexOf(item)
        if (index !== -1) {
          this.withdrawRuleForm.domains.splice(index, 1)
        }
        this.withdrawRules.domains.shift(this.withdrawRules.domains[0])
      } else {
        this.$message.error('不可删除')
      }
    },
    // 账号密码只能输入英文 数字
    check_num(index) {
      this.withdrawRuleForm.domains[
        index
      ].cardAccount = this.withdrawRuleForm.domains[index].cardAccount.replace(
        /[^\a-\z\A-\Z0-9]/g,
        ''
      )
      this.withdrawRuleForm.domains[
        index
      ].cardPassword = this.withdrawRuleForm.domains[
        index
      ].cardPassword.replace(/[^\a-\z\A-\Z0-9-]/g, '')
    }
  },
  watch: {
    showDialog() {
      this.dialogFormVisible = this.showDialog
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-form #withdrawAllMoney) {
  // display: flex;
  // flex-wrap: wrap;
  margin-left: 10px;
  margin-bottom: 10px !important;
}
:deep(.el-form .el-form-item) {
  margin-bottom: 16px !important;
}
.breadth {
  margin-left: 3px !important;
}
:deep(.el-form-item__error) {
  top: 90% !important;
}
:deep(.styleBtn) {
  display: flex;
  width: 450px;
  flex-wrap: nowrap !important;
  padding: 0px !important;
}
:deep(.el-icon-circle-plus-outline) {
  font-size: 35px;
}
:deep(.el-icon-remove-outline) {
  font-size: 35px;
}
:deep(.el-dialog .el-dialog__body) {
  padding-right: 10px !important;
}
.styleBtn_item {
  padding: 0 !important;
}
.rightBtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.leftBtn {
  display: flex;

  flex-wrap: wrap;
  padding: 0;
}
.leftGroup {
  display: flex;
  flex-wrap: nowrap;
}
</style>
